<template>
  <div class="main-left">
      <ul>
          <li v-for="(item,index) in dataList" :key="item.id" @click="changeStatus(index)" :class="item.state==liState ? 'color':''">{{item.name}}</li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            dataList:[
                {
                    id:1,
                    name:"用户信息",
                    state:"/user"
                },
                {
                    id:2,
                    name:"用户数据",
                    state:"/datas"
                },
                {
                    id:3,
                    name:"数据修改",
                    state:"/changeData"
                },
            ],
            liState:"/user"
        }
    },
    methods:{
        changeStatus(i){
            this.liState = this.dataList[i].state;
            let userName = this.$route.params.id;
            let path = this.liState +"/" +userName
            this.$router.push(path);
        }
    }
}
</script>

<style scoped lang="scss">
.main-left{
    width: 150px;
    height: calc(100vh - 80px);
    background-color: rgb(112, 109, 109);
}
ul{
    width: 150px;
    margin: 0;
    padding: 0;
    text-align: center;
}
li{
    list-style: none;
    height: 50px;
    line-height: 50px;
    color: white;
    user-select: none;
    &:hover{
        background-color: rgb(77, 75, 75);
        cursor: pointer;
    }
}
.color{
    color: aquamarine;
}
</style>